<template>
  <el-dialog title="选择学校" :visible.sync="isSelectSchool" width="70%" :before-close="handleClose" :close-on-click-modal='false'>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-select v-model="form.province" placeholder="请选择省" size="small" @change="cityFn">
          <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="form.city" placeholder="请选择市" size="small" @change="areaFn">
          <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="form.area" placeholder="请选择区" size="small">
          <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4"><el-input v-model="form.title" placeholder="请输入学校名称关键字" size="small"></el-input></el-col>
      <el-col :span="4"><el-input v-model="form.account" placeholder="请输入超级管理员账号" size="small"></el-input></el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
    </el-row>
    <br>
    <el-row :gutter="24" class="centerTable">
      <radio-table :tableConfig="tableConfig" :tableData="tableData" @noRadio="noRadio"></radio-table>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="close(1)">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import radioTable from '@/components/radioTable.vue'
import {APISCHOOLWHOLEREGION, APISCHOOLLIST} from '@/common/api.js'
export default {
  props: ['isSelectSchool', 'school_id'],
  components: {radioTable},
  data () {
    return {
      isResetPassWord: false,
      form: {
        province: '',
        city: '',
        area: '',
        title: '',
        account: ''
      },
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: false,
        border: true,
        config: [
          {name: '选择', id: 'radio', width: '40px'},
          {name: '序号', type: 'index', width: '60px'},
          {id: 'title', name: '学校名称'},
          {id: 'province_title', name: '省份'},
          {id: 'city_title', name: '城市'},
          {id: 'area_title', name: '区/县'},
          {id: 'account', name: '超级管理员'},
          {id: 'tel', name: '联系电话'},
          {id: 'school_type', name: '学校类型'},
          {id: 'service_type_title', name: '学校归属'}
        ]
      },
      tableData: [],
      arr: ''
    }
  },
  created () {
    this.tableList()
    this.getWholeRegion()
  },
  methods: {
    getWholeRegion () {
      APISCHOOLWHOLEREGION().then((res) => {
        this.provinceOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    cityFn () {
      this.form.city = ''
      this.form.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.form.province
      }).then((res) => {
        this.cityOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    areaFn () {
      this.form.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.form.city
      }).then((res) => {
        this.areaOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableList()
    },
    noRadio (val) {
      this.arr = val.val.id
    },
    tableList () { // 表格
      this.form.page = this.page
      this.form.limit = this.limit
      APISCHOOLLIST(this.form).then((res) => {
        if (res.status === 1) {
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          this.tableData = res.data.list
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleClose () {
      this.$emit('noSelectSchool')
    },
    close (type) {
      var list = {
        type: type,
        school: this.arr
      }
      this.$emit('noSelectSchool', list)
    }
  }
}
</script>
